<!--菜单-->
<template>
    <div class="home">
        <div class="el-header">
            <div class="header-top">
                <el-row>
                    <el-col :span="16" class="clo-left">
                        <div><img src="../assets/logo.png"></div>
                        <div class="header-top-font">汝阳县人民医院建筑能源管理互联网平台</div>
                    </el-col>
                    <el-col :span="8">
                        <ul class="show">
                            <li>当前用户:管理员|</li>
                            <li>修改密码|</li>
                            <li>程序设置|</li>
                            <li>全屏切换|</li>
                            <li>返回首页|</li>
                            <li>撤销</li>
                        </ul>
                    </el-col>
                </el-row>
            </div>
            <div class="header-bottom">
                <el-row style="width: 100%">
                    <el-col :span="9" style="top:0" class="header-bottom-left">
                        <div>
                            <router-link to="/MyHome" class="link-style">
                                <div>
                                    <img src="../assets/img/menu1.png">
                                </div>
                                <span>首页</span>
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/BuildBasicMsg" class="link-style">
                                <div>
                                    <img src="../assets/img/menu2.png"/>
                                </div>
                                <span>建筑基本信息</span>
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/ElectricityMonitor" class="link-style">
                                <div>
                                    <img src="../assets/img/menu3.png">
                                </div>
                                电表实时监测
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/WaterMonitor" class="link-style">
                                <div>
                                    <img src="../assets/img/menu4.png">
                                </div>
                                水表实时监测
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/MonitoringBranch" class="link-style">
                                <div>
                                    <img src="../assets/img/menu5.png">
                                </div>
                                <span>监测支路一览</span>
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/EnergyConsumption" class="link-style">
                                <div>
                                    <img src="../assets/img/menu6.png">
                                </div>
                                <span>建筑能耗统计</span>
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/EnergyAnalysis" class="link-style">
                                <div>
                                    <img src="../assets/img/menu7.png">
                                </div>
                                建筑能耗分析
                            </router-link>
                        </div>
                        <div>
                            <router-link to="/EnergyWarning" class="link-style">
                                <div>
                                    <img src="../assets/img/menu8.png">
                                </div>
                                能耗预警
                            </router-link>
                        </div>
                    </el-col>
                    <el-col :span="6" style="top:0" :offset="9" class="header-bottom-right">
                        <div class="header-bottom-right-left header-bottom-right-box">系统已运行<span style="color: #EB895C">35</span>天</div>
                        <div class="header-bottom-right-right header-bottom-right-box">
                            {{ dateFormat(date) }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="el-main">
            <router-view/>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            date: new Date()
        }
    },
    methods: {
        // 格式化时间
        dateFormat(time) {
            const date = new Date(time);
            const year = date.getFullYear();
            /**
             * 在日期格式中，月份是从0开始的，因此要加0
             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
             */
            const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            const hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            const minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            const seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        }
    },
    mounted() {
        //显示当前日期时间
        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
}
</script>

<style>
body {
    padding: 0 0 !important;
    margin: 0 auto;
}

.home {
    height: 100%;
    box-sizing: border-box;
    padding: 3px 3px;
    display: flex;
    flex-direction: column;
}

ul li {
    padding: 0;
    list-style-type: none;
    margin-bottom: 0;
}

/*头部右侧列表*/
.show {
    color: white;
    font-size: 12px;
    display: flex;
    justify-content: center;
    margin-top: 27px;
    letter-spacing: 1px;
    cursor: pointer;
}

/*头部*/
.el-header {
    padding: 0 0 !important;
    width: 100%;
    /*height: 18%!important; height在非固定大小页面中几乎无效*/
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 5px;
}

/*内容区域*/
.el-main {
    box-sizing: border-box;
    padding: 0 0 !important;
    width: 100%;
    display: flex !important;
    /*height: 78% !important;*/
}

/*头部文字栏*/
.header-top {
    width: 100%;
    height: 40% !important;
    background-color: #25A0D9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.clo-left {
    display: flex;
    height: 60px !important;
}

/* logo*/
.clo-left img {
    width: 45px;
    height: 45px;
}

/*头部左侧文字*/
.header-top-font {
    color: white;
    font-size: 24px;
    font-weight: bold;
    margin-top: 12px;
}

/* 头部菜单栏*/
.header-bottom {
    width: 100%;
    border: 1px solid gray;
    display: flex;
    flex: 1;
    box-sizing: border-box;
    padding: 0.5em 0;
}

/*头部菜单栏的左半部分，菜单区域*/
.header-bottom-left {
    display: flex;
    font-size: 12px;
}

.header-bottom-left > div {
    height: 100%;
    width: 12%;
    /*margin-right: 0.7em;*/
    text-align: center;
    font-weight: bold;
}

.header-bottom-left > div img {
    width: 4em;
}

/*右侧显示时间*/
.header-bottom-right {
    display: table;
}

.header-bottom-right div {
    display: table-cell;
    vertical-align: middle;
}

/*显示运行时间多少天的文字*/
.header-bottom-right-left {
    /*width: 230px;*/
    width: 8em;
}
.header-bottom-right-box {
    color: #5C9FBF;
    font-weight: bold;
    font-size: 22px;
}
.header-bottom-right-right {
    text-align: center;
    font-weight: bold;
    margin-right: 10px;
}

.link-style {
    text-decoration: none;
}

.header-bottom .el-col {
    top: 50% !important;
    transform: translateY(-50%);
}
</style>
